<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        需求：将图片上传到服务器
     -->
     <input type="file" id="file1"><br>
     <button>上传图片</button><br>
     <!-- 
         显示上传的图片
         src：填写服务器的地址
      -->
      <img src="" alt="" height="700px" width="600px">

      <script>

          /* 
            通过Ajax上传图片
           */

           const request = new XMLHttpRequest();
           const fileObj = document.querySelector("#file1")
           const btnObj = document.querySelector("button")
           const imgObj = document.querySelector("img")
           //绑定事件
           btnObj.addEventListener("click",function(){
               //2.判断用户是否添加了文件
               console.dir(fileObj)
               if(fileObj.files.length<=0){
                   return alert("请上传图片")
               }
               //3.将用户添加的文件绑定到formData对象
               console.log("-----------")
               const formData = new FormData();
               console.dir(formData)
               formData.append('files',fileObj.files[0])

               //4.发送Ajax请求，需要通过post请求发送
               request.open("POST","http://www.biwuit.cn/spboot/upload")
               request.send(formData)
               request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    //获取服务端响应胡来的内容
                    //{"msg":"文件上传成功","fileName":"f78fc8ba-2553-4b1f-8b02-5fae2f39b3101.jpg","code":200}
                    //服务端在存储文件的时候，因为考虑到文件名会相同覆盖，所以在服务端生成一个随机字符串来代替文件名
                    console.log(request.responseText)
                    //5.把上传到服务端图片显示在当前页面
                    //6.需要判断服务端响应回来的消息是否是文件上传成功，如果是 才显示
                    const responseValue = JSON.parse(request.responseText) 
                    if(responseValue.msg=="文件上传成功"){
                        //会显到页面
                        imgObj.src = 'http://www.biwuit.cn/spboot/uploads/'+responseValue.fileName;
                    }
                }
            }
           })
      </script>
</body>
</html>